<template>
  <a-list
    item-layout="vertical"
    size="large"
    :pagination="pagination"
    :data-source="listData"
    :loading="loading"
    style="margin: 0 10px"
  >
    <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
      <template slot="actions">
        <span>
          <a-icon type="file-text" style="font-size: 18px"/>
          {{ item.articleNum }} 文章
        </span>
        <span>
          <a-icon type="eye" style="font-size: 18px"/>
          {{ item.viewsNum }} 访问
        </span>
        <span>
          <a-icon type="star-o" style="font-size: 18px"/>
           {{ item.collectNum }} 收藏
        </span>
        <span>
          <a-icon type="like-o" style="font-size: 18px"/>
           {{ item.likesNum }} 点赞
        </span>
        <span>
          <a type="primary" :href="'/personalHome/'+item.username" class="hoverClass">
            查看主页
          </a>
        </span>
      </template>
      <a-list-item-meta :description="'已加入：' + item.joinTime">
        <a slot="title" :href="'/personalHome/'+item.username">
          <h3 class="list-title">{{ item.username_dictText }}</h3>
        </a>
        <a slot="avatar" href="/personalHome">
          <a-avatar :src="getImgView(item.userAvatar)" class="list-avatar"/>
        </a>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
</template>

<script>
import { getAction, getFileAccessHttpUrl } from '@/api/manage'
import { ellipsis } from '@/utils/util'

export default {
  name: 'PersonFollowList',
  data() {
    return {
      username: this.$route.params.username,
      listData: [],
      pagination: {
        onChange: page => {
        },
        pageSize: 5
      },
      loading: false,
      url: {
        list: '/articleView/getPersonFollowList',
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getAction(this.url.list, {
        'username': this.username
      }).then(res => {
        if (res.success) {
          this.listData = res.result.records
          this.loading = false
        }
      })
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
  }
}
</script>

<style scoped>
.list-title:hover {
  color: #20a0ff;
}
</style>
